import React from "react";
import {designProPage} from "../designProPage";
import {reactive} from "plain-design-composition";
import {$$notice, PlAlert, PlArrowStep, PlArrowStepGroup, PlButton, PlForm, PlFormItem, PlIcon, PlInput, PlSelect, PlSelectOption, PlInputGroup} from "plain-design";
import './step-form.less'
import {delay} from "plain-utils/utils/delay";

export default designProPage(() => {

    const state = reactive({
        step: 0,
        formData: {
            payAccount: 'plain-design@pay.com',
            acceptType: 'weixin',
            acceptAccount: 'plain-design@pay.com',
            acceptName: '痞老板很皮',
            payAmount: "1,314",
            payPassword: "abcabc",
        },
    })

    const submit = async () => {
        await delay(2000)
        state.step++
        $$notice.success('转账成功！')
    }

    const billInfo = <>
        <PlFormItem label="付款账户">{state.formData.payAccount}</PlFormItem>
        <PlFormItem label="收款账户">{state.formData.acceptAccount}</PlFormItem>
        <PlFormItem label="收款人姓名">{state.formData.acceptName}</PlFormItem>
        <PlFormItem label="转账金额"><span className="pl-text-error" style={{fontSize: '20px', fontWeight: 800}}>{state.formData.payAmount} ￥</span></PlFormItem>
    </>

    return () => <>
        <div className="pro-page-header">
            <h1>分布表单</h1>
            <p>
                将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。
                <PlButton mode="text" label="查看当前页面代码" onClick={() => window.open("https://gitee.com/martsforever-demo/template-plain-react-micro-base/blob/master/pages/form/step-form.less")}/>
            </p>
        </div>
        <div className="pro-page-card">
            <div className="pro-page-card-step-group">
                <PlArrowStepGroup current={state.step}>
                    <PlArrowStep>转账申请</PlArrowStep>
                    <PlArrowStep>转账确认</PlArrowStep>
                    <PlArrowStep>转账成功</PlArrowStep>
                </PlArrowStepGroup>
            </div>

            {state.step === 0 && <>
                <PlForm modelValue={state.formData} centerWhenSingleColumn>
                    <PlFormItem label="付款账户" required field="payAccount">
                        <PlInput v-model={state.formData.payAccount}/>
                    </PlFormItem>
                    <PlFormItem label="收款账户" required field="acceptAccount">
                        <PlInputGroup block>
                            <PlSelect v-model={state.formData.acceptType} inputProps={{width: '100px'}}>
                                <PlSelectOption label="微信" val="weixin"/>
                                <PlSelectOption label="支付宝" val="alipay"/>
                                <PlSelectOption label="银联" val="yinlian"/>
                            </PlSelect>
                            <PlInput v-model={state.formData.acceptAccount} fillGroup/>
                            <PlSelect inputProps={{width: '100px'}} modelValue={"immediate"}>
                                <PlSelectOption label="立即转账" val="immediate"/>
                                <PlSelectOption label="定时转账" val="onTime"/>
                            </PlSelect>
                        </PlInputGroup>
                    </PlFormItem>
                    <PlFormItem label="收款人姓名" required field="acceptName">
                        <PlInput v-model={state.formData.acceptName}/>
                    </PlFormItem>
                    <PlFormItem label="收款金额" required field="payAccount">
                        <PlInput v-model={state.formData.payAccount}/>
                    </PlFormItem>
                    <PlFormItem contentAlign="center">
                        <PlButton label="下一步" onClick={() => state.step++}/>
                    </PlFormItem>
                </PlForm>
            </>}
            {state.step === 1 && <>
                <PlForm modelValue={state.formData} centerWhenSingleColumn>
                    <PlAlert status="primary" style={{marginBottom: '16px', width: '400px'}}>确认转账后，资金将直接打入对方账户，无法退回。</PlAlert>
                    {billInfo}
                    <div className="step-form-page-separator"/>
                    <PlFormItem label="支付密码">
                        <PlInput className="pay-input-password" nativeAttrs={{type: 'password'}} v-model={state.formData.payPassword}/>
                    </PlFormItem>
                    <PlFormItem contentAlign={"center"}>
                        <PlButton label="上一步" mode="stroke" onClick={() => state.step--}/>
                        <PlButton label="提交" asyncHandler={submit}/>
                    </PlFormItem>
                </PlForm>
            </>}

            {state.step === 2 && <>
                <div className="transfer-account-result" style={{paddingBottom: '20px'}}>
                    <PlIcon icon="el-icon-success" status="success"/>
                    <span>操作成功</span>
                    <span>预计三分钟内到账</span>
                    <div className="transfer-account-result-buttons">
                        <PlButton label={'再转一笔'} onClick={() => state.step = 0}/>
                        <PlButton label={'查看账单'} mode="stroke"/>
                    </div>
                    <PlForm modelValue={state.formData} style={{backgroundColor: '#fafafa', padding: '12px'}}>
                        {billInfo}
                    </PlForm>
                </div>
            </>}
        </div>
    </>
})
